import { loadShaderFromFile } from "../lib/tool-utils.js";
import * as twgl from "../lib/twgl-full.module.js";

const main = async () => {
  const vs = await loadShaderFromFile("./shader/tiny.vert");
  const fs = await loadShaderFromFile("./shader/tiny.frag");
  const gl = document.querySelector("#c").getContext("webgl");
  const programInfo = twgl.createProgramInfo(gl, [vs, fs]);

  const arrays = {
    // 矩形，两个三角形，6个顶点
    position: [-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0],
  };
  const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

  function render(time) {
    twgl.resizeCanvasToDisplaySize(gl.canvas);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    const uniforms = {
      time: time * 0.001,
      resolution: [gl.canvas.width, gl.canvas.height],
    };

    gl.useProgram(programInfo.program);
    twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
    twgl.setUniforms(programInfo, uniforms);
    twgl.drawBufferInfo(gl, bufferInfo);

    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
};
main();
